import React, { ReactNode, useEffect, useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { isEmpty } from '@/utils/common';
import { Mask, Spinning } from '@/design';
import { useSelector, useDispatch } from 'umi';
import { CSSTransition } from "react-transition-group";

import styles from './modalwrap.less';
interface IModalWrap {
  modalVisiable: boolean
  headName?: string
  btnName?: string
  disabled?: boolean
  onClickSure?: () => any
  onClose?: () => any
  children?: ReactNode
  picNode?: ReactNode
  showPic?: boolean
  noPadding?: boolean
  submitLoading?: boolean
  hideFooter? : boolean
  closeText? : ReactNode
  onLink?: () => any
  onCancel?: ()=> any
  leftText?: any
}
// 預定信息
export default function (props: IModalWrap) {
  const { modalVisiable, headName, btnName, disabled, onClickSure, showPic, picNode, noPadding, submitLoading, hideFooter, closeText, onCancel, leftText } = props;

  let result = (<>
    {modalVisiable && <Mask onClick={props.onClose} />}
    <CSSTransition
      unmountOnExit
      classNames="spec_foot_modal"
      timeout={300}
      in={modalVisiable}
    >
      <div className={styles.modal_wrap}>
      {leftText  && <span className={styles.modal_head_left_text} onClick={onCancel}><i>取消當前優惠券</i></span>}
      {closeText ? <span className={styles.modal_tolink} onClick={props.onClose}><i onClick={props.onLink}>{closeText}</i> </span>: <i className={styles.modal_close} onClick={props.onClose}>關閉</i>}
        <>
          {
            !showPic && <div className={styles.modal_head}>
              <h3>{headName}</h3>
            </div>
          }
          { showPic && picNode}
          
          <div className={`${styles.modal_body} ${noPadding ? styles.modal_body_no_padding : ''}`}>
            {props.children}
          </div>
          {!hideFooter && <div className={styles.modal_foot}>
            <button type="button" className={styles.btn} disabled={disabled} onClick={onClickSure}>
                <span>{btnName || '確定'}</span>
                {submitLoading && <Spinning state="white"/>}
            </button>
          </div>}
        </>
      </div>
    </CSSTransition>
  </>
  )
  return ReactDOM.createPortal(result, document.body);
}